<template>
  <div class="home_menu">
    <el-menu
      :default-active="menuActive"
      background-color="#180300"
      text-color="#fff"
      active-text-color="#ffd04b"
      class="home_menu_box"
      :unique-opened="uniqueOpened"
      router
    >
      <el-submenu index="2" v-show="userType == 0">
        <span slot="title" v-show="userType == 0">用户管理</span>
        <el-menu-item index="/user/individualUser" v-show="userType !== 1"
          >个人用户</el-menu-item
        >
      </el-submenu>

      <el-submenu index="3" v-show="userType == 0">
        <span slot="title" v-show="userType == 0">培训管理</span>
        <el-menu-item index="/train/coachTrain" v-show="userType == 0"
          >教练员培训</el-menu-item
        >
        <el-menu-item index="/train/refereeTrain">裁判员培训</el-menu-item>
      </el-submenu>

      <el-submenu index="4" v-show="userType == 0">
        <span slot="title" v-show="userType == 0">教练员</span>
        <el-menu-item index="/coach/certification" v-show="userType == 0"
          >注册审核</el-menu-item
        >
        <el-menu-item index="/coach/answerList" v-show="userType == 0"
          >认证答题记录</el-menu-item
        >
      </el-submenu>

      <el-submenu index="5">
        <span slot="title">裁判员</span>
        <el-menu-item index="/referee/certification">注册审核</el-menu-item>
        <el-menu-item index="/referee/examList" v-show="userType == 0"
          >认证答题管理</el-menu-item
        >
      </el-submenu>

      <el-submenu index="6" v-show="userType == 0">
        <span slot="title" v-show="userType == 0">订单管理</span>
        <el-menu-item index="/order/coachTrain" v-show="userType == 0"
          >教练员培训</el-menu-item
        >
        <el-menu-item index="/order/refereeTrain" v-show="userType == 0"
          >裁判员培训</el-menu-item
        >
        <el-menu-item index="/order/refereeRegister" v-show="userType == 0"
          >裁判员注册</el-menu-item
        >
      </el-submenu>
      <el-submenu index="7" v-show="userType == 0">
        <span slot="title" v-show="userType == 0">签到管理</span>
        <el-menu-item index="/sign/signlist" v-show="userType == 0"
          >签到列表</el-menu-item
        >
      </el-submenu>
      <el-submenu index="8" v-show="userType == 0">
        <span slot="title" v-show="userType == 0">会员管理</span>
        <el-menu-item index="/member/thatperson" v-show="userType == 0"
          >个人会员</el-menu-item
        >
        <el-menu-item index="/member/group" v-show="userType == 0"
          >团体会员</el-menu-item
        >
      </el-submenu>
      <el-menu-item @click="logoutBtn()">
        <span slot="title">退出系统</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "HomeMenu",
  props: {},
  data() {
    return {
      userName: this.$store.state.loginUserName,
      userType: parseInt(this.$store.state.loginType), // 登录会员类型
      menuActive: "", // 导航默认选中
      uniqueOpened: true,
    };
  },
  created: function () {
    this.setMenuActive();
  },
  methods: {
    // 设置选择
    setMenuActive: function () {
      let path = this.$route.path;
      if (path.indexOf("/train/coachTrain") == 0) {
        this.menuActive = "/train/coachTrain";
      } else if (path.indexOf("/referee/certification") == 0) {
        this.menuActive = "/referee/certification";
      } else if (path.indexOf("/referee/exam") == 0) {
        this.menuActive = "/referee/examList";
      } else if (path.indexOf("/train/refereeTrain") == 0) {
        this.menuActive = "/train/refereeTrain";
      } else if (path.indexOf("/coach") == 0) {
        this.menuActive = "/coach/certification";
      } else {
        this.menuActive = path;
      }
    },
    // 退出登录
    logoutBtn: function () {
      let that = this;
      this.$confirm("确认退出?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(() => {
          that.$store.commit("set_loginToken", "");
          that.$store.commit("set_loginType", "");
          that.$store.commit("set_loginUserId", "");
          that.$store.commit("set_loginUserName", "");
          that.$router.push({
            name: "Login",
          });
        })
        .catch(() => {});
    },
  },
  watch: {
    // 监听路有变化
    $route: "setMenuActive",
  },
};
</script>
